<template>
  <div class="accessory-inventory">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>配饰库存管理</span>
          <el-button type="primary" @click="handleAdd">新增配饰</el-button>
        </div>
      </template>

      <!-- 搜索表单 -->
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="配饰编号">
          <el-input v-model="searchForm.accessoryCode" placeholder="请输入配饰编号" clearable />
        </el-form-item>
        <el-form-item label="配饰名称">
          <el-input v-model="searchForm.accessoryName" placeholder="请输入配饰名称" clearable />
        </el-form-item>
        <el-form-item label="配饰类型">
          <el-input v-model="searchForm.accessoryType" placeholder="请输入配饰类型" clearable />
        </el-form-item>
        <el-form-item label="颜色">
          <el-input v-model="searchForm.color" placeholder="请输入颜色" clearable />
        </el-form-item>
        <el-form-item label="供应商">
          <el-input v-model="searchForm.supplier" placeholder="请输入供应商" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 数据表格 -->
      <el-table 
        :data="tableData" 
        style="width: 100%" 
        v-loading="loading"
        @selection-change="handleSelectionChange"
        border
        stripe
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="accessoryCode" label="配饰编号" width="120" />
        <el-table-column prop="accessoryName" label="配饰名称" width="150" />
        <el-table-column prop="accessoryType" label="配饰类型" width="100" />
        <el-table-column prop="color" label="颜色" width="100" />
        <el-table-column prop="specification" label="规格" width="120" />
        <el-table-column prop="unit" label="单位" width="80" />
        <el-table-column prop="quantity" label="库存数量" width="100" />
        <el-table-column prop="price" label="单价" width="100">
          <template #default="scope">
            ¥{{ scope.row.price }}
          </template>
        </el-table-column>
        <el-table-column prop="supplier" label="供应商" width="150" />
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column label="操作" fixed="right" width="200">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button 
              size="small" 
              type="danger" 
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
      <el-pagination
          v-model:current-page="searchForm.pageNum"
          v-model:page-size="searchForm.pageSize"
        :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      </div>

      <!-- 新增/编辑对话框 -->
      <el-dialog
        :title="dialogTitle"
        v-model="dialogVisible"
        width="500px"
        :close-on-click-modal="false"
      >
      <el-form
          ref="formRef"
          :model="form"
        :rules="rules"
        label-width="100px"
          class="accessory-form"
      >
          <el-form-item label="配饰编号" prop="accessoryCode">
            <el-input v-model="form.accessoryCode" placeholder="请输入配饰编号" />
        </el-form-item>
          <el-form-item label="配饰名称" prop="accessoryName">
            <el-input v-model="form.accessoryName" placeholder="请输入配饰名称" />
        </el-form-item>
          <el-form-item label="配饰类型" prop="accessoryType">
            <el-input v-model="form.accessoryType" placeholder="请输入配饰类型" />
        </el-form-item>
        <el-form-item label="颜色" prop="color">
            <el-input v-model="form.color" placeholder="请输入颜色" />
        </el-form-item>
        <el-form-item label="规格" prop="specification">
            <el-input v-model="form.specification" placeholder="请输入规格" />
        </el-form-item>
        <el-form-item label="单位" prop="unit">
            <el-input v-model="form.unit" placeholder="请输入单位" />
          </el-form-item>
          <el-form-item label="库存数量" prop="quantity">
            <el-input-number v-model="form.quantity" :min="0" />
        </el-form-item>
        <el-form-item label="单价" prop="price">
            <el-input-number v-model="form.price" :min="0" :precision="2" />
        </el-form-item>
          <el-form-item label="供应商" prop="supplier">
            <el-input v-model="form.supplier" placeholder="请输入供应商" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
            <el-input
              v-model="form.remark"
              type="textarea"
              placeholder="请输入备注"
            />
        </el-form-item>
      </el-form>
      <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleSubmit">确定</el-button>
          </span>
      </template>
    </el-dialog>

    <!-- 查看详情对话框 -->
    <el-dialog
      title="配饰详情"
      v-model="viewDialogVisible"
      width="500px"
    >
      <el-descriptions :column="1" border>
        <el-descriptions-item label="配饰编号">{{ viewForm.accessoryCode }}</el-descriptions-item>
        <el-descriptions-item label="配饰名称">{{ viewForm.accessoryName }}</el-descriptions-item>
        <el-descriptions-item label="配饰类型">{{ viewForm.accessoryType }}</el-descriptions-item>
        <el-descriptions-item label="颜色">{{ viewForm.color }}</el-descriptions-item>
        <el-descriptions-item label="规格">{{ viewForm.specification }}</el-descriptions-item>
        <el-descriptions-item label="单位">{{ viewForm.unit }}</el-descriptions-item>
        <el-descriptions-item label="库存数量">{{ viewForm.quantity }}</el-descriptions-item>
        <el-descriptions-item label="单价">{{ viewForm.price }}</el-descriptions-item>
        <el-descriptions-item label="供应商">{{ viewForm.supplier }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ viewForm.remark }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'

// 搜索表单数据
const searchForm = reactive({
  accessoryCode: '',
  accessoryName: '',
  accessoryType: '',
  color: '',
  supplier: '',
  pageNum: 1,
  pageSize: 10
    })

// 表格数据
const tableData = ref([])
    const loading = ref(false)
    const total = ref(0)

    // 表单数据
    const dialogVisible = ref(false)
const dialogTitle = ref('')
const formRef = ref()
const form = reactive({
      id: null,
  accessoryCode: '',
  accessoryName: '',
  accessoryType: '',
      color: '',
      specification: '',
  unit: '',
  quantity: 0,
      price: 0,
  supplier: '',
      remark: ''
    })

    // 表单校验规则
    const rules = {
  accessoryCode: [{ required: true, message: '请输入配饰编号', trigger: 'blur' }],
  accessoryName: [{ required: true, message: '请输入配饰名称', trigger: 'blur' }],
  accessoryType: [{ required: true, message: '请输入配饰类型', trigger: 'blur' }],
  unit: [{ required: true, message: '请输入单位', trigger: 'blur' }],
  quantity: [{ required: true, message: '请输入库存数量', trigger: 'blur' }],
  price: [{ required: true, message: '请输入单价', trigger: 'blur' }]
    }

// 获取配饰列表
const getAccessoryList = async () => {
  try {
      loading.value = true
    const params = { ...searchForm }
    const response = await axios.get('/api/admin/inventory/accessory', { params })
    tableData.value = response.data.content
    total.value = response.data.totalElements
  } catch (error) {
    console.error('获取配饰列表失败:', error)
    ElMessage.error('获取配饰列表失败')
  } finally {
      loading.value = false
    }
}

// 搜索
const handleSearch = () => {
  searchForm.pageNum = 1
  getAccessoryList()
    }

// 重置搜索
const resetSearch = () => {
  searchForm.accessoryCode = ''
  searchForm.accessoryName = ''
  searchForm.accessoryType = ''
  searchForm.color = ''
  searchForm.supplier = ''
  searchForm.pageNum = 1
  getAccessoryList()
    }

// 新增配饰
    const handleAdd = () => {
  dialogTitle.value = '新增配饰'
      dialogVisible.value = true
  Object.keys(form).forEach(key => {
    form[key] = key === 'quantity' || key === 'price' ? 0 : null
  })
}

// 编辑配饰
    const handleEdit = (row) => {
  dialogTitle.value = '编辑配饰'
      dialogVisible.value = true
  Object.assign(form, row)
    }

// 删除配饰
    const handleDelete = (row) => {
  ElMessageBox.confirm('确认删除该配饰吗？', '提示', {
        type: 'warning'
  }).then(async () => {
    try {
      await axios.delete(`/api/admin/inventory/accessory/${row.id}`)
        ElMessage.success('删除成功')
      getAccessoryList()
    } catch (error) {
      console.error('删除配饰失败:', error)
      ElMessage.error('删除配饰失败')
    }
  })
    }

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  await formRef.value.validate(async (valid) => {
    if (valid) {
      try {
        if (form.id) {
          await axios.put(`/api/admin/inventory/accessory/${form.id}`, form)
          ElMessage.success('更新成功')
        } else {
          await axios.post('/api/admin/inventory/accessory', form)
          ElMessage.success('新增成功')
        }
        dialogVisible.value = false
        getAccessoryList()
      } catch (error) {
        console.error('保存配饰失败:', error)
        ElMessage.error('保存配饰失败')
      }
    }
  })
}

// 分页
const handleSizeChange = (val) => {
  searchForm.pageSize = val
  getAccessoryList()
    }

const handleCurrentChange = (val) => {
  searchForm.pageNum = val
  getAccessoryList()
}

// 表格选择
const selectedRows = ref([])
const handleSelectionChange = (val) => {
  selectedRows.value = val
}

// 查看详情
const viewDialogVisible = ref(false)
const viewForm = reactive({
  accessoryCode: '',
  accessoryName: '',
  accessoryType: '',
  color: '',
  specification: '',
  unit: '',
  quantity: 0,
  price: 0,
  supplier: '',
  remark: ''
})

const handleView = (row) => {
  Object.assign(viewForm, row)
  viewDialogVisible.value = true
}

// 初始化
    onMounted(() => {
  getAccessoryList()
})
</script>

<style scoped>
.accessory-inventory {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-form {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.accessory-form {
  max-height: 500px;
  overflow-y: auto;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.el-descriptions {
  padding: 20px;
}
</style> 